<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>User Management</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h1>User Management</h1>

        <div class="actions-bar">
            <a href="/users/new" class="btn btn-primary">Add New User</a>
        </div>

        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="user : ${users}" th:data-id="${user.id}">
                    <td th:text="${user.id}">ID</td>
                    <td th:text="${user.name}">Name</td>
                    <td th:text="${user.email}">Email</td>
                    <td class="actions">
                        <a th:href="@{/users/{id}/edit(id=${user.id})}" class="btn btn-edit">Edit</a>
                        <form th:action="@{/users/{id}/delete(id=${user.id})}" method="post" style="display: inline;">
                            <button type="submit" class="btn btn-delete" 
                                    th:onclick="'return app.confirmDelete(event, ' + ${user.id} + ')'">Delete</button>
                        </form>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        const app = Vue.createApp({
            methods: {
                confirmDelete(event, userId) {
                    if (confirm('确定要删除这个用户吗？')) {
                        return true;
                    }
                    event.preventDefault();
                    return false;
                }
            }
        }).mount('#app')
    </script>
</body>
</html>
